<template>
  <a-modal
    title="回复内容"
    :width="640"
    :visible="visible"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <div v-if="model">
      <div>{{ model.back_content }}</div>

      <viewer :images="images">
        <div class="img-list">
          <div v-for="item in images" :key="item">
            <!-- <a :href="item.host + item.img_url" target="_blank"> -->
            <img :src="item" />
            <!-- </a> -->
          </div>
        </div>
        <!-- <img
          v-for="(src, index) in images"
          :src="src"
          :key="index"
        /> -->
      </viewer>
    </div>
  </a-modal>
</template>

<script>
// import { Viewer, ViewerGroup } from 'v-viewer'
// import 'viewerjs/dist/viewer.css'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  components: {
    // 'v-viewer': Viewer,
    // 'v-viewer-group': ViewerGroup
  },
  data () {
    return {
      viewer: null,
      images: []
    }
  },
  created () {
    this.$watch('model', () => {
      if (this.model) {
        this.images = this.model.backImg.map(item => item.host + item.img_url)
        console.log('sdfdsf', this.images)
      }
    })
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
.img-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.img-list > div {
  margin: 0 20px 20px 0;
}
.img-list img{
  width: 100px;
  height: 100px;
}
</style>
